<template>
  <div class="checkout-container">
    <!-- 导航栏 -->
    <div class="navbar">
      <router-link to="/cart" class="navbar-back">
        <i class="fas fa-arrow-left"></i>
      </router-link>
      <div class="navbar-title">订单确认</div>
    </div>
    
    <div class="container" style="padding-bottom: 70px;">
      <!-- 收货地址 -->
      <div class="section-card">
        <div class="address-card" @click="showAddressSelector = true">
          <div class="address-icon">
            <i class="fas fa-map-marker-alt"></i>
          </div>
          <div v-if="selectedAddress" class="address-content">
            <div class="address-user">
              <div class="address-name">{{ selectedAddress.receiverName }}</div>
              <div class="address-phone">{{ formatPhone(selectedAddress.receiverPhone) }}</div>
              <div v-if="selectedAddress.isDefault" class="address-default">默认</div>
            </div>
            <div class="address-text">{{ selectedAddress.fullAddress }}</div>
          </div>
          <div v-else class="address-content">
            <div class="address-text">请选择收货地址</div>
          </div>
          <div class="address-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </div>
      
      <!-- 支付方式 -->
      <div class="section-card">
        <div class="payment-card">
          <div class="payment-method" @click="selectPayment('alipay')">
            <div class="payment-icon">
              <i class="fab fa-alipay"></i>
            </div>
            <div class="payment-name">支付宝</div>
            <div v-if="paymentMethod === 'alipay'" class="payment-selected">
              <i class="fas fa-check"></i>
            </div>
            <div v-else class="payment-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          
          <div class="payment-method" @click="selectPayment('wechat')">
            <div class="payment-icon">
              <i class="fab fa-weixin"></i>
            </div>
            <div class="payment-name">微信支付</div>
            <div v-if="paymentMethod === 'wechat'" class="payment-selected">
              <i class="fas fa-check"></i>
            </div>
            <div v-else class="payment-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          
          <div class="payment-method" @click="selectPayment('creditcard')">
            <div class="payment-icon">
              <i class="fas fa-credit-card"></i>
            </div>
            <div class="payment-name">银行卡支付</div>
            <div v-if="paymentMethod === 'creditcard'" class="payment-selected">
              <i class="fas fa-check"></i>
            </div>
            <div v-else class="payment-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 订单信息 -->
      <div class="section-card">
        <!-- 按商店分组的商品 -->
        <div v-for="store in groupedItems" :key="store.storeId" class="store-card">
          <div class="store-header">
            <i class="fas fa-store store-icon"></i>
            <div class="store-name">{{ store.storeName }}</div>
          </div>
          
          <div v-for="item in store.items" :key="item.cartItemId" class="product-item">
            <img class="product-image" :src="item.mainImage" :alt="item.productName">
            <div class="product-content">
              <div class="product-name">{{ item.productName }}</div>
              <div class="price-row">
                <div class="product-price">¥{{ item.price }}</div>
                <div class="product-qty">x{{ item.quantity }}</div>
              </div>
              <div class="product-spec">
                <span class="spec-label">规格：</span>
                <span class="spec-value">{{ item.specValue || item.variant }}</span>
              </div>
            </div>
          </div>
          
          <div class="remark">
            <div class="remark-label">备注</div>
            <div class="remark-value" @click="openRemark(store.storeId)">
              <span>{{ store.remark || '添加备注' }}</span>
              <i class="fas fa-chevron-right remark-arrow"></i>
            </div>
          </div>
          
          <div class="store-footer">
            <div class="store-total">
              共{{ store.totalQuantity }}件商品，小计：<span class="total-price">¥{{ store.subtotal.toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 订单明细 -->
      <div class="section-card">
        <div class="order-info">
          <div class="info-item">
            <div class="info-label">商品金额</div>
            <div class="info-value">¥{{ subtotal.toFixed(2) }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">运费</div>
            <div class="info-value">¥{{ shipping.toFixed(2) }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">优惠</div>
            <div class="info-value">-¥{{ discount.toFixed(2) }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">应付金额</div>
            <div class="info-value info-highlight">¥{{ total.toFixed(2) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部结算栏 -->
    <div class="checkout-footer">
      <div class="checkout-total">¥{{ total.toFixed(2) }}</div>
      <button class="submit-button" @click="submitOrder" :disabled="!defaultAddress">提交订单</button>
    </div>

    <!-- 备注弹窗 -->
    <div v-if="showRemarkDialog" class="remark-dialog">
      <div class="remark-dialog-content">
        <div class="remark-dialog-header">
          <div class="remark-dialog-title">添加备注</div>
          <button class="remark-dialog-close" @click="showRemarkDialog = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <textarea 
          v-model="currentRemark" 
          class="remark-textarea" 
          placeholder="请输入备注信息(选填)"
        ></textarea>
        <button class="remark-submit" @click="saveRemark">确定</button>
      </div>
    </div>
    
    <!-- 地址选择弹窗 -->
    <div v-if="showAddressSelector" class="address-selector-dialog">
      <div class="address-selector-content">
        <div class="address-dialog-header">
          <div class="address-dialog-title">选择收货地址</div>
          <button class="address-dialog-close" @click="showAddressSelector = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="address-list">
          <div 
            v-for="address in addresses" 
            :key="address.id"
            :class="['address-item', selectedAddress && selectedAddress.id === address.id ? 'selected' : '']"
            @click="selectAddress(address)"
          >
            <div class="address-item-content">
              <div class="address-item-user">
                <div class="address-item-name">{{ address.receiverName }}</div>
                <div class="address-item-phone">{{ formatPhone(address.receiverPhone) }}</div>
                <div v-if="address.isDefault" class="address-item-default">默认</div>
              </div>
              <div class="address-item-text">{{ address.fullAddress }}</div>
            </div>
            <div class="address-item-check">
              <i v-if="selectedAddress && selectedAddress.id === address.id" class="fas fa-check"></i>
            </div>
          </div>
        </div>
        
        <div class="address-actions">
          <router-link to="/address/add" class="add-address-btn">
            <i class="fas fa-plus"></i> 新增地址
          </router-link>
          <button class="confirm-address-btn" @click="confirmAddressSelection">确认选择</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '../network/api'

// 定义API响应接口
interface ApiResponse {
  code: number;
  message: string;
  data?: any;
}

interface CartItem {
  cartItemId: number
  productId: number
  productName: string
  mainImage: string
  price: number
  quantity: number
  selected: boolean
  storeId: number
  storeName: string
  variant: string
  specValue?: string
  specId?: number
  spec_id?: number
}

interface Address {
  id: number
  userId: number
  receiverName: string
  receiverPhone: string
  province: string
  city: string
  district: string
  detailAddress: string
  isDefault: boolean
  fullAddress: string
}

interface StoreGroup {
  storeId: number
  storeName: string
  items: CartItem[]
  remark: string
  subtotal: number
  totalQuantity: number
}

// 数据
const selectedItems = ref<CartItem[]>([])
const defaultAddress = ref<Address | null>(null)
const selectedAddress = ref<Address | null>(null)
const addresses = ref<Address[]>([])
const paymentMethod = ref('alipay')
const showRemarkDialog = ref(false)
const showAddressSelector = ref(false)
const currentRemarkStoreId = ref(0)
const currentRemark = ref('')
const storeRemarks = ref<Map<number, string>>(new Map())
const router = useRouter()
const route = useRoute()

// 获取用户ID
const getUserId = () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
    return userInfo.data?.userId || userInfo.data?.id || userInfo.userId || userInfo.id;
  } catch (e) {
    console.error('解析用户信息失败:', e);
    return '';
  }
};

// 运费和折扣
const shipping = ref(10.00)
const discount = ref(0.00)

// 获取选中的购物车商品
const fetchSelectedCartItems = async () => {
  try {
    // 统一通过API获取，确保数据最新
    const response = await api.getCartItems()
    const cartItems = response.data.filter((item: CartItem) => item.selected);
    
    // 处理每个商品项，确保规格信息正确
    selectedItems.value = cartItems.map((item: any) => ({
      ...item,
      // 确保规格信息存在，优先使用specValue
      specValue: item.specValue || item.spec_value || null,
      variant: item.variant || item.variantName || '',
      specId: item.specId || item.spec_id || 0,
      spec_id: item.specId || item.spec_id || 0
    }));
    
    console.log('处理后的购物车商品:', selectedItems.value);
  } catch (error) {
    console.error('获取选中的购物车商品失败:', error)
    // 如果API不存在，使用模拟数据
    selectedItems.value = [
      {
        cartItemId: 1,
        productId: 1,
        productName: '宠物高级狗粮 全营养配方',
        mainImage: 'https://images.unsplash.com/photo-1589924691995-400dc9ecc119?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        price: 129,
        quantity: 1,
        selected: true,
        storeId: 1,
        storeName: '宠物乐园',
        variant: '口味：牛肉味 | 规格：10kg装',
        specValue: '净含量：10kg/包 口味：牛肉味',
        specId: 1,
        spec_id: 1
      },
      {
        cartItemId: 2,
        productId: 2,
        productName: '高蛋白训练零食 - 狗狗训练必备',
        mainImage: 'https://images.unsplash.com/photo-1600369671236-e74531ae9a7b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        price: 58,
        quantity: 2,
        selected: true,
        storeId: 1,
        storeName: '宠物乐园',
        variant: '口味：鸡肉味 | 规格：500g装',
        specValue: '净含量：500g/包 口味：鸡肉味',
        specId: 2,
        spec_id: 2
      },
      {
        cartItemId: 3,
        productId: 3,
        productName: '多层猫爬架 带猫窝和磨爪柱',
        mainImage: 'https://images.unsplash.com/photo-1545276880-75e4c3c6634e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        price: 258,
        quantity: 1,
        selected: true,
        storeId: 2,
        storeName: '萌宠之家',
        variant: '颜色：米白色 | 规格：四层',
        specValue: '颜色：米白色 规格：四层猫爬架',
        specId: 3,
        spec_id: 3
      }
    ]
  }
}

// 获取用户地址
const fetchAddresses = async () => {
  try {
    // 获取用户ID
    const userId = getUserId();
    if (!userId) {
      console.warn('获取用户信息失败，但继续执行');
    }
    
    const response = await api.getUserAddresses(userId || '0') as unknown as ApiResponse;
    console.log('地址API响应:', response);
    
    // 初始化为空地址列表
    addresses.value = [];
    
    // 检查API响应格式
    if (response && response.code === 100) {
      // 处理地址数据
      const addressData = response.data;
      
      if (addressData) {
        // 如果地址数据不是数组，转换为数组处理
        const addressList = Array.isArray(addressData) ? addressData : [addressData];
        
        if (addressList.length > 0) {
          // 转换为标准地址对象格式
          addresses.value = addressList.map((item: any) => ({
            id: item.addressId || item.address_id || item.id || 0,
            userId: item.userId || item.user_id || userId,
            receiverName: item.recipientName || item.recipient_name || item.name || '未命名',
            receiverPhone: item.phone || item.tel || '',
            province: item.province || item.provinceName || '',
            city: item.city || item.cityName || '',
            district: item.district || item.districtName || '',
            detailAddress: item.detailedAddress || item.detailed_address || item.detail || '',
            isDefault: typeof item.isDefault === 'number' ? item.isDefault === 1 : 
                      (item.isDefault === true || item.is_default === true || item.isDefault === '1' || item.is_default === '1'),
            fullAddress: `${item.province || item.provinceName || ''}${item.city || item.cityName || ''}${item.district || item.districtName || ''}${item.detailedAddress || item.detailed_address || item.detail || ''}`
          }));
          
          // 设置默认地址
          defaultAddress.value = addresses.value.find(address => address.isDefault) || addresses.value[0] || null;
          // 同时设置为选中的地址
          selectedAddress.value = defaultAddress.value;
        }
      }
    }
  } catch (error) {
    console.error('获取地址失败:', error)
    // 使用模拟数据
    defaultAddress.value = {
      id: 1,
      userId: 1,
      receiverName: '王小明',
      receiverPhone: '13888888888',
      province: '北京市',
      city: '朝阳区',
      district: '',
      detailAddress: '建国路88号中央公园1号楼2单元502室',
      isDefault: true,
      fullAddress: '北京市朝阳区建国路88号中央公园1号楼2单元502室'
    }
    // 同时设置为选中的地址
    selectedAddress.value = defaultAddress.value;
  }
}

// 按商店分组商品
const groupedItems = computed(() => {
  const groups = new Map<number, StoreGroup>()
  
  selectedItems.value.forEach(item => {
    if (!groups.has(item.storeId)) {
      groups.set(item.storeId, {
        storeId: item.storeId,
        storeName: item.storeName,
        items: [],
        remark: storeRemarks.value.get(item.storeId) || '',
        subtotal: 0,
        totalQuantity: 0
      })
    }
    
    const group = groups.get(item.storeId)!
    group.items.push(item)
    group.subtotal += item.price * item.quantity
    group.totalQuantity += item.quantity
  })
  
  return Array.from(groups.values())
})

// 商品小计
const subtotal = computed(() => {
  return selectedItems.value.reduce((total, item) => total + item.price * item.quantity, 0)
})

// 订单总金额
const total = computed(() => {
  return subtotal.value + shipping.value - discount.value
})

// 选择支付方式
const selectPayment = (method: string) => {
  paymentMethod.value = method
}

// 打开备注弹窗
const openRemark = (storeId: number) => {
  currentRemarkStoreId.value = storeId
  currentRemark.value = storeRemarks.value.get(storeId) || ''
  showRemarkDialog.value = true
}

// 保存备注
const saveRemark = () => {
  storeRemarks.value.set(currentRemarkStoreId.value, currentRemark.value)
  showRemarkDialog.value = false
}

// 选择地址
const selectAddress = (address: Address) => {
  selectedAddress.value = address
}

// 确认地址选择
const confirmAddressSelection = () => {
  showAddressSelector.value = false
}

// 提交订单
const submitOrder = async () => {
  if (!selectedAddress.value) {
    alert('请先选择收货地址')
    return
  }
  
  try {
    // 获取用户ID
    const userId = getUserId();
    
    // 按商店分组创建订单
    const ordersList = groupedItems.value.map(store => {
      // 获取商店的备注
      const storeRemark = storeRemarks.value.get(store.storeId) || '';
      
      // 获取商店的所有商品项
      const orderItems = store.items.map(item => ({
        productId: item.productId,
        productName: item.productName,
        productImage: item.mainImage,
        price: item.price,
        quantity: item.quantity,
        isReviewed: 0,
        productVariant: item.specValue || item.variant,
        specValue: item.specValue || item.variant,
        specId: item.specId || item.spec_id || 0,
        spec_id: item.specId || item.spec_id || 0
      }));
      
      // 获取商店的第一个商品作为主要商品（兼容旧代码）
      const mainItem = store.items[0];
      
      // 构建订单基本信息
      const orderData = {
        userId: userId,
        addressId: selectedAddress.value!.id,
        paymentMethod: paymentMethod.value,
        totalAmount: store.subtotal, // 商店商品小计
        status: 'pending_payment',
        paymentStatus: '未支付',
        shippingFee: Math.round(shipping.value / groupedItems.value.length * 100) / 100, // 平均分配运费
        discountAmount: Math.round(discount.value / groupedItems.value.length * 100) / 100, // 平均分配折扣
        remark: storeRemark,
        storeName: store.storeName,
        storeId: store.storeId, // 添加商店ID字段
        // 主要商品信息（兼容旧代码）
        items: {
          productId: mainItem.productId,
          productName: mainItem.productName, 
          productImage: mainItem.mainImage,
          price: mainItem.price,
          quantity: mainItem.quantity,
          name: mainItem.productName, // 添加name字段
          mainImage: mainItem.mainImage, // 添加mainImage字段
          specValue: mainItem.specValue || mainItem.variant, // 添加规格值字段
          variant: mainItem.variant, // 添加变体字段
          specId: mainItem.specId || mainItem.spec_id || 0, // 添加规格ID字段
          spec_id: mainItem.specId || mainItem.spec_id || 0 // 兼容下划线命名格式
        },
        // 所有商品项
        orderItems: orderItems
      };
      
      return orderData;
    });
    
    console.log(`准备提交${ordersList.length}个商店的订单`);
    
    // 检查是否有批量创建订单的API
    let response;
    if (api.createBatchOrders) {
      // 使用批量创建API
      response = await api.createBatchOrders(ordersList);
    } else {
      // 没有批量API，使用循环单个创建
      const results = [];
      for (const order of ordersList) {
        try {
          const result = await api.createOrder(order);
          results.push(result);
        } catch (err) {
          console.error('创建单个订单失败:', err);
          results.push(null);
        }
      }
      response = { code: 100, data: results };
    }
    
    // 订单创建成功后，删除购物车中的对应商品
    try {
      // 获取所有选中商品的购物车ID
      const cartItemIds = selectedItems.value.map(item => item.cartItemId);
      
      // 批量删除购物车商品
      if (cartItemIds.length > 0) {
        // 尝试使用批量删除API
        await Promise.all(cartItemIds.map(id => 
          api.removeFromCart(id).catch(err => {
            console.error(`删除购物车商品失败 ID:${id}`, err);
          })
        ));
      }
    } catch (error) {
      console.error('删除购物车商品失败:', error);
      // 继续执行，不影响订单提交成功
    }
    
    // 订单创建成功，跳转到订单详情页
    router.push(`/orders`);
  } catch (error) {
    console.error('创建订单失败:', error);
    // 模拟成功
    alert('订单提交成功！');
    router.push('/orders');
  }
}

// 格式化手机号
const formatPhone = (phone: string) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

onMounted(() => {
  // 检查是否有直接购买的查询参数
  if (route.query.directBuy === 'true') {
    console.log('检测到直接购买参数:', route.query);
    
    // 创建一个临时购物车项目
    const directBuyItem: CartItem = {
      cartItemId: 0,
      productId: Number(route.query.productId) || 0,
      productName: String(route.query.productName || '商品'),
      mainImage: String(route.query.mainImage || ''),
      price: parseFloat(String(route.query.price || '0')),
      quantity: Number(route.query.quantity || 1),
      selected: true,
      storeId: Number(route.query.storeId || 1),
      storeName: String(route.query.storeName || '商店'),
      variant: String(route.query.variant || ''),
      specId: Number(route.query.specId || 0),
      spec_id: Number(route.query.specId || 0)
    };
    
    console.log('创建直接购买项目:', directBuyItem);
    
    // 设置为选中的商品
    selectedItems.value = [directBuyItem];
  } else {
    // 正常从购物车获取商品
    fetchSelectedCartItems();
  }
  
  fetchAddresses();

  // 添加页面卸载事件监听器，清除会话标记
  window.addEventListener('beforeunload', () => {
    // 用户离开页面时清除会话标记
    sessionStorage.removeItem('checkout_session_active');
  });
})
</script>

<style scoped>
.checkout-container {
  background-color: #f8fafc;
  min-height: 100vh;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar-back {
  margin-right: 15px;
  color: #333;
  text-decoration: none;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-weight: 500;
}

.container {
  padding: 15px;
}

.section-card {
  background-color: white;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.address-card {
  padding: 15px;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #f0f9ff, white);
  text-decoration: none;
  color: inherit;
}

.address-icon {
  color: #3490dc;
  font-size: 20px;
  margin-right: 15px;
}

.address-content {
  flex: 1;
}

.address-user {
  display: flex;
  margin-bottom: 5px;
}

.address-name {
  font-weight: 500;
  margin-right: 15px;
}

.address-phone {
  color: #718096;
}

.address-text {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.4;
}

.address-default {
  display: inline-block;
  padding: 1px 5px;
  background-color: #ebf8ff;
  color: #3490dc;
  font-size: 10px;
  border-radius: 4px;
  margin-left: 5px;
}

.address-arrow {
  color: #a0aec0;
}

.payment-card {
  padding: 15px;
}

.payment-method {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}

.payment-method:last-child {
  margin-bottom: 0;
}

.payment-icon {
  width: 20px;
  height: 20px;
  color: #3490dc;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.payment-name {
  flex: 1;
  font-weight: 500;
}

.payment-arrow {
  color: #a0aec0;
}

.payment-selected {
  color: #3490dc;
}

.store-card {
  margin-bottom: 15px;
}

.store-header {
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}

.store-icon {
  color: #3490dc;
  margin-right: 10px;
}

.store-name {
  font-weight: 500;
}

.product-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.product-image {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  object-fit: cover;
  margin-right: 10px;
}

.product-content {
  flex: 1;
}

.product-name {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 14px;
}

.product-spec {
  font-size: 12px;
  color: #718096;
  margin-bottom: 5px;
  background-color: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
}

.spec-label {
  font-weight: 500;
  color: #4a5568;
}

.spec-value {
  color: #2d3748;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  color: #e53e3e;
  font-weight: 500;
}

.product-qty {
  color: #718096;
  font-size: 12px;
}

.store-footer {
  padding: 15px;
  text-align: right;
}

.store-total {
  font-size: 14px;
}

.total-price {
  color: #e53e3e;
  font-weight: bold;
  margin-left: 5px;
}

.order-info {
  padding: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #718096;
}

.info-value {
  color: #4a5568;
  text-align: right;
}

.info-highlight {
  color: #e53e3e;
  font-weight: 500;
}

.checkout-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.05);
}

.checkout-total {
  color: #e53e3e;
  font-weight: bold;
  font-size: 18px;
}

.submit-button {
  background-color: #e53e3e;
  color: white;
  padding: 8px 25px;
  border-radius: 20px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.submit-button:disabled {
  background-color: #cbd5e0;
  cursor: not-allowed;
}

.remark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}

.remark-label {
  color: #4a5568;
}

.remark-value {
  color: #a0aec0;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.remark-arrow {
  margin-left: 5px;
}

.remark-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.remark-dialog-content {
  width: 90%;
  max-width: 400px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.remark-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.remark-dialog-title {
  font-weight: 500;
}

.remark-dialog-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #718096;
  cursor: pointer;
}

.remark-textarea {
  width: 100%;
  height: 120px;
  padding: 15px;
  border: none;
  resize: none;
  outline: none;
  font-size: 14px;
}

.remark-submit {
  width: 100%;
  padding: 12px;
  background-color: #3490dc;
  color: white;
  border: none;
  font-weight: 500;
  cursor: pointer;
}

/* 地址选择器样式 */
.address-selector-dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.address-selector-content {
  width: 100%;
  max-height: 80vh;
  background-color: white;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.address-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.address-dialog-title {
  font-size: 16px;
  font-weight: 500;
}

.address-dialog-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #718096;
  cursor: pointer;
}

.address-list {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
}

.address-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}

.address-item.selected {
  background-color: #f0f9ff;
}

.address-item-content {
  flex: 1;
}

.address-item-user {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.address-item-name {
  font-weight: 500;
  margin-right: 10px;
}

.address-item-phone {
  color: #718096;
}

.address-item-default {
  display: inline-block;
  padding: 1px 5px;
  background-color: #ebf8ff;
  color: #3490dc;
  font-size: 10px;
  border-radius: 4px;
  margin-left: 5px;
}

.address-item-text {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.4;
}

.address-item-check {
  display: flex;
  align-items: center;
  color: #3490dc;
  margin-left: 10px;
}

.address-actions {
  display: flex;
  padding: 15px;
  border-top: 1px solid #e2e8f0;
}

.add-address-btn {
  flex: 1;
  padding: 10px;
  background-color: white;
  border: 1px solid #3490dc;
  color: #3490dc;
  border-radius: 5px;
  text-align: center;
  margin-right: 10px;
  text-decoration: none;
}

.confirm-address-btn {
  flex: 1;
  padding: 10px;
  background-color: #3490dc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style> 